<template>
	<div id="scoreImport">
		<div class="breadcrumb">
			<img src="../../../../static/img/appoinment_1.png" class="head_img">
			<span class="title" @click="cancel()">成绩管理</span>/ 导入成绩
		</div>

		<div class="list">
			<div class="list_head">
				<span class="head_name">导入成绩</span>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<div id="sec_1">
				1、下载成绩导入模板，批量录入学生成绩
				<a href="http://swapp-test-images.oss-cn-hangzhou.aliyuncs.com/physical/%E4%BD%93%E6%B5%8B%E6%88%90%E7%BB%A9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
				 class="mylink">下载模板</a>
			</div>
			<div id="sec_2">
				<el-select v-model="test" class="myselect" @change="changeTest">
					<el-option v-for='item in tests' :label='item.name' :value='item.physicalId' :key="item.physicalId"></el-option>
				</el-select>
				<div id="step2">
					2、导入填写好的学生成绩文件
					<el-upload :action="actionUrl" :on-success="handleSuccess" :on-error="handleError" :disabled="!isHavePhysicalId" name="uploadFile"
					 :headers="headers" :show-file-list='false' class="mybtn">
						<el-button type="primary" :disabled="!isHavePhysicalId">选择文件</el-button>
					</el-upload>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				tests: [],
				test: "",
				actionUrl: this.$util.domain + "/physicaltest/importscore",
				headers: {},
				isHavePhysicalId: false
			};
		},
		mounted() {
			this.headers = {
				rootUnid: this.user.rootUnid
			};
			this.getAllTest();
		},
		computed: mapState({ user: state => state.user }),
		//返回
		methods: {
			cancel() {
				let params = {
					grade: this.$util.getUrlParam("grade"),
					college: this.$util.getUrlParam("college"),
					pageNum: this.$util.getUrlParam("pageNum"),
					keyword: this.$util.getUrlParam("keyword"),
					physicalId: this.$util.getUrlParam("physicalId"),
				}
				this.$util.refreshTo('/#/test_scoreManage', params);
			},
			// 获取体测下拉列表
			getAllTest() {
				let url = this.$util.domain + "/physicaltest/common/testitemlist";
				this.tests = [];

				this.$http({
					url,
					method: "POST"
				}).then(response => {
					if (response.data.error == 10000) {
						this.tests = response.data.data;
						if (this.tests && this.tests.length) {
							this.test = this.tests[0].physicalId;
							this.isHavePhysicalId = true;
						}
					}
				});
			},
			changeTest() {
				this.actionUrl = this.$util.domain + "/physicaltest/importscore?physicalId=" + this.test;
			},
			handleSuccess(response) {
				if (response.error !== 10000) {
					if (response.error == -10000) {
						this.$util.errorMsg("服务器开小差");
					} else {
						this.$util.errorMsg(response.message);
					}
				} else {
					this.$util.successMsg("文件上传成功");
					let params = {
						importId: response.data.importId,
						physicalId: this.test
					}
					this.$util.refreshTo("/#/test_importResult", params);
				}
			},
			handleError(response) {
				if (response.status === 403) {
					this.SIGNOUT();
					location.href = "/login";
				}
				this.$util.errorMsg("文件上传失败");
			}
		}
	};
</script>

<style>
	#scoreImport {
		padding-top: 80px;
		height: calc(100% - 100px);
		overflow: hidden;
	}

	#scoreImport .title {
		color: #0398ff;
	}

	#scoreImport #sec_1 {
		width: 70%;
		margin-left: 15%;
		height: 150px;
		text-align: center;
		line-height: 150px;
		color: #333333;
		border: solid 1px #b2b2b2;
		margin-top: 85px;
	}

	#sec_2 {
		width: 70%;
		margin-left: 15%;
		height: 150px;
		text-align: center;
		color: #333333;
		border: solid 1px #b2b2b2;
		margin-top: 40px;
	}

	#sec_2 .myselect {
		margin-top: 30px;
	}

	#step2 {
		color: #333333;
		margin-top: 10px;
		height: 40px;
		line-height: 40px;
	}

	#step2 .mybtn {
		display: inline-block;
		width: 100px;
		height: 40px;
		vertical-align: middle;
	}

	#step2 .el-upload--text {
		border: 0px;
		width: 100px;
		height: 40px;
	}

	#step2 .el-button {
		border-radius: 0px;
	}

	#sec_1 .mylink {
		color: #0398ff;
	}
</style>